﻿    @model Leiktuther.Models.GameInstance
@{
    ViewBag.Title = "Connect4 - " + Model.Name;
}

<h2>Connect4  @Model.Name</h2>

<div id="Connect4tablediv">
    <table id="C4table">
        <tbody>
            <tr class="C4row">
                <td class ="C4class" id="1" ><div class="C4div"></div></td>  
                <td class ="C4class" id="2" ><div class="C4div"></div></td>
                <td class ="C4class" id="3" ><div class="C4div"></div></td>
                <td class ="C4class" id="4" ><div class="C4div"></div></td>
                <td class ="C4class" id="5" ><div class="C4div"></div></td>
                <td class ="C4class" id="6" ><div class="C4div"></div></td>
                <td class ="C4class" id="7" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="8" ><div class="C4div"></div></td>  
                <td class ="C4class" id="9" ><div class="C4div"></div></td>
                <td class ="C4class" id="10" ><div class="C4div"></div></td>
                <td class ="C4class" id="11" ><div class="C4div"></div></td>
                <td class ="C4class" id="12" ><div class="C4div"></div></td>
                <td class ="C4class" id="13" ><div class="C4div"></div></td>
                <td class ="C4class" id="14" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="15" ><div class="C4div"></div></td>  
                <td class ="C4class" id="16" ><div class="C4div"></div></td>
                <td class ="C4class" id="17" ><div class="C4div"></div></td>
                <td class ="C4class" id="18" ><div class="C4div"></div></td>
                <td class ="C4class" id="19" ><div class="C4div"></div></td>
                <td class ="C4class" id="20" ><div class="C4div"></div></td>
                <td class ="C4class" id="21" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="22" ><div class="C4div"></div></td>  
                <td class ="C4class" id="23" ><div class="C4div"></div></td>
                <td class ="C4class" id="24" ><div class="C4div"></div></td>
                <td class ="C4class" id="25" ><div class="C4div"></div></td>
                <td class ="C4class" id="26" ><div class="C4div"></div></td>
                <td class ="C4class" id="27" ><div class="C4div"></div></td>
                <td class ="C4class" id="28" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="C4class" id="29" ><div class="C4div"></div></td>  
                <td class ="C4class" id="30" ><div class="C4div"></div></td>
                <td class ="C4class" id="31" ><div class="C4div"></div></td>
                <td class ="C4class" id="32" ><div class="C4div"></div></td>
                <td class ="C4class" id="33" ><div class="C4div"></div></td>
                <td class ="C4class" id="34" ><div class="C4div"></div></td>
                <td class ="C4class" id="35" ><div class="C4div"></div></td>
            </tr>
            <tr class="C4row">
                <td class ="canPlace" id="36" ><div class="C4div"></div></td>  
                <td class ="canPlace" id="37" ><div class="C4div"></div></td>
                <td class ="canPlace" id="38" ><div class="C4div"></div></td>
                <td class ="canPlace" id="39" ><div class="C4div"></div></td>
                <td class ="canPlace" id="40" ><div class="C4div"></div></td>
                <td class ="canPlace" id="41" ><div class="C4div"></div></td>
                <td class ="canPlace" id="42" ><div class="C4div"></div></td>
            </tr>

        </tbody>
    </table>
</div>

<div id="chatIt">
    @Html.Partial("_ChatWindow")
</div>


  
<script>
    $(function () {
        var group = '@(Model.ID)';
        // var playerIndex = @ViewData["PlayerCount"];
        var hub = $.connection.gameHub;
        var test = 0;


        hub.client.cellClicked = function (cellId) {


            $("#" + cellId).show(function () {

                $(this).css('background-color', 'yellow')
                $(this).attr('class', 'hasYellowChip')
                aboveID = $(this).attr('id') - 7
                above = $(this).parent().prev().find('#' + aboveID)
                above.attr('class', 'canPlace')
                $('#C4table tr').each(function () {
                    $(this).find('td').each(function () {

                        if ($(this).hasClass('hasRedChip') || $(this).hasClass('hasYellowChip') && !$(this).hasClass('C4row')) {

                            test++;
                            console.log(test)
                            if (test == 903) {
                                alert("draw");
                            }
                        }

                    });

                });//each lokast

            });

        };

        $.connection.hub.start().done(function () {
            hub.server.join(group);

            $("#C4table tr td ").click(function () {
                if ($(this).hasClass('canPlace') && !$(this).hasClass('hasRedChip') && !$(this).hasClass('hasYellowChip')) {

                    hub.server.clickCell(group, this.id);
                    clicked = $(this).attr('id');

                    // finnur og velur cellu beint fyrir ofan
                    aboveID = clicked - 7;
                    above = $(this).parent().prev().find('#' + aboveID);

                    // finnur og velur cellu til vinstri
                    left1ID = clicked - 1;
                    left1 = $(this).parent().find('#' + left1ID);
                    left2ID = clicked - 2;
                    left2 = $(this).parent().find('#' + left2ID);
                    left3ID = clicked - 3;
                    left3 = $(this).parent().find('#' + left3ID);

                    //finnur og velur cellu til hægri
                    right1ID = ++clicked;
                    right1 = $(this).parent().find('#' + right1ID);
                    right2ID = 1 + clicked;
                    right2 = $(this).parent().find('#' + right2ID);
                    right3ID = 2 + clicked;
                    right3 = $(this).parent().find('#' + right3ID);
                    // finnur og velur cellu beint fyrir neðan
                    below1ID = 6 + clicked;
                    below1 = $(this).parent().next().find('#' + below1ID)
                    below2ID = 13 + clicked;
                    below2 = $(this).parent().next().next().find('#' + below2ID)
                    below3ID = 20 + clicked;
                    below3 = $(this).parent().next().next().next().find('#' + below3ID)

                    //finnur og velur cellu ská niður til hægri
                    slideRightDown1ID = 7 + clicked;
                    slideRightDown1 = $(this).parent().next().find('#' + slideRightDown1ID)
                    slideRightDown2ID = 15 + clicked;
                    slideRightDown2 = $(this).parent().next().next().find('#' + slideRightDown2ID)
                    slideRightDown3ID = 23 + clicked;
                    slideRightDown3 = $(this).parent().next().next().next().find('#' + slideRightDown3ID)

                    //finnur og velur cellu ská niður til vinstri
                    slideLeftDown1ID = 5 + clicked;
                    slideLeftDown1 = $(this).parent().next().find('#' + slideLeftDown1ID)
                    slideLeftDown2ID = 11 + clicked;
                    slideLeftDown2 = $(this).parent().next().next().find('#' + slideLeftDown2ID)
                    slideLeftDown3ID = 17 + clicked;
                    slideLeftDown3 = $(this).parent().next().next().next().find('#' + slideLeftDown3ID)

                    //finnur og velur cellur ská upp til vinstri
                    slideLeftUp1ID = clicked - 9;
                    slideLeftUp1 = $(this).parent().prev().find('#' + slideLeftUp1ID)
                    slideLeftUp2ID = clicked - 17;
                    slideLeftUp2 = $(this).parent().prev().prev().find('#' + slideLeftUp2ID)
                    slideLeftUp3ID = clicked - 25;
                    slideLeftUp3 = $(this).parent().prev().prev().prev().find('#' + slideLeftUp3ID)

                    //finnur og velur cellu ská upp til hægri
                    slideRightUp1ID = clicked - 7;
                    slideRightUp1 = $(this).parent().prev().find('#' + slideRightUp1ID)
                    slideRightUp2ID = clicked - 13;
                    slideRightUp2 = $(this).parent().prev().prev().find('#' + slideRightUp2ID)
                    slideRightUp3ID = clicked - 19;
                    slideRghtUp3 = $(this).parent().prev().prev().prev().find('#' + slideRightUp3ID)

                    //breytir klösum á td
                    $(this).attr('class', 'hasRedChip')
                    above.attr('class', 'canPlace')
                    $(this).css('background-color', 'red')


                    if ($(this).hasClass('hasRedChip') && left1.hasClass('hasRedChip') && left2.hasClass('hasRedChip')
                        && left3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && left1.hasClass('hasRedChip') && left2.hasClass('hasRedChip')
                             && right1.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && left1.hasClass('hasRedChip') && right1.hasClass('hasRedChip')
                                 && right2.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && right1.hasClass('hasRedChip') && right2.hasClass('hasRedChip')
                             && right3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    // lóðréttur sigur
                    if ($(this).hasClass('hasRedChip') && below1.hasClass('hasRedChip') && below2.hasClass('hasRedChip')
                          && below3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }

                    // ská til Vinstri
                    if ($(this).hasClass('hasRedChip') && slideRightDown1.hasClass('hasRedChip') && slideRightDown2.hasClass('hasRedChip')
                         && slideRightDown3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideRightDown1.hasClass('hasRedChip') && slideRightDown2.hasClass('hasRedChip')
                         && slideLeftUp1.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideRightDown1.hasClass('hasRedChip') && slideLeftUp1.hasClass('hasRedChip')
                     && slideLeftUp2.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideLeftUp1.hasClass('hasRedChip') && slideLeftUp2.hasClass('hasRedChip')
                          && slideLeftUp3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    // Ská til Hægri
                    if ($(this).hasClass('hasRedChip') && slideLeftDown1.hasClass('hasRedChip') && slideLeftDown2.hasClass('hasRedChip')
                           && slideLeftDown3.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideLeftDown1.hasClass('hasRedChip') && slideLeftDown2.hasClass('hasRedChip')
                         && slideRightUp1.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideLeftDown1.hasClass('hasRedChip') && slideRightUp1.hasClass('hasRedChip')
                        && slideRightUp2.hasClass('hasRedChip')) {

                        alert("WINNER!")
                    }
                    if ($(this).hasClass('hasRedChip') && slideRightUp1.hasClass('hasRedChip') && slideRightUp2.hasClass('hasRedChip')
                       && slideRightUp3.hasClass('hasRedChip')) {

                        alert("WINNER!")

                    }

                    $('#C4table tr').each(function () {
                        $(this).find('td').each(function () {

                            if ($(this).hasClass('hasRedChip') || $(this).hasClass('hasYellowChip') && !$(this).hasClass('C4row')) {

                                test++;
                                console.log(test)
                                if (test == 903) {
                                    alert("draw");
                                }
                            }

                        });

                    });//each lokast

                    /* || right.hasClass('hasRedChip'))          
                    if ($(this).hasClass('hasRedChip') && below.hasClass('hasRedChip')) {
                            winner2++

                        }
                        if ($(this).hasClass('hasRedChip') && slideright.hasClass('hasRedChip')) {
                            winner3++

                        }
                        if ($(this).hasClass('hasRedChip') && slideleft.hasClass('hasRedChip')) {
                            winner4++

                        }
                    }
                */

                }//click if statement

            });//click lokast

        });//done lokast
    });

</script>
<!-- 	                    $('#C4table tr').each(function () {
	                        $(this).find('td').each(function () {

	                            if ($(this).hasClass('hasRedChip')) {
	                                
	                                alert(winner);
	                            }


	                        });
	                    });//each lokast
-->